<template>
  <page-header-wrapper>
    <page-tab-list> </page-tab-list>

    <a-card :border="false">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <div class="g-title">活动规则设置</div>

        <a-form-model-item label="活动规则" prop="rule">
          <div class="flex maxWidth">
            <a-textarea v-model="form.rule" placeholder="" />
          </div>
        </a-form-model-item>
      </a-form-model>

      <div class="tc">
        <a-button type="primary" :disabled="disabled" @click="onSubmit"> 提交 </a-button>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { confSave, conf } from '@/api/marketing/curPrice'

export default {
  data() {
    return {
      labelCol: { span: 3 },
      wrapperCol: { span: 19 },
      disabled: false,
      form: {
        rule: '',
      },
      rules: {
        rule: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
    }
  },

  async mounted() {
    this.init()
  },

  methods: {
    async init() {
      const hide = this.$message.loading('加载中', 0)

      let res = await conf()
      if (!res.code) {
        this.form = res.data.conf
      }
      hide()
    },

    onSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.disabled = true
          const hide = this.$message.loading('加载中', 0)
          let { form } = this

          const res = await confSave({ conf: form })
          hide()
          this.disabled = false
          if (res.code == 0) {
            this.$message.success('创建成功')
            return
          }
          this.$message.error(res.msg)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.g-title {
  padding-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.maxWidth {
  max-width: 468px;
}

.tc {
  text-align: center;
}
</style>
